<template>
	<view>
		<view style="height: 35px; background-color: #FED501;"></view>
		<view class="head">
			<text>发现</text>
		</view>
		<view class="alongBox" v-for="(item, index) in box" :key="index">
			<image :src="item.url" mode=""></image>
			<view>
				<text>{{ item.type }}</text>
				<text>{{ item.describe }}</text>
			</view>
			<uni-icons type="arrowright" size="30"></uni-icons>
		</view>
	</view>
</template>

<script>
	import uniIcons from "@/components/uni-icons/uni-icons.vue";
	export default {
		components: {
			uniIcons,
		},
		data() {
			return {
				box: [
					{
						id: 0,
						url: "../../static/images/find/one.png",
						type: "医院",
						describe: "寻找身边宠物医院"
					},{
						id: 1,
						url: "../../static/images/find/two.png",
						type: "配种",
						describe: "为爱宠匹配另一半"
					},{
						id: 2,
						url: "../../static/images/find/three.png",
						type: "寻宠",
						describe: "助力宠友寻回爱宠"
					},{
						id: 3,
						url: "../../static/images/find/four.png",
						type: "美容",
						describe: "让宠物变得美美哒"
					},{
						id: 4,
						url: "../../static/images/find/five.png",
						type: "寄养",
						describe: "出差外出托付他人"
					}
				]
			}
		},
		methods: {
			
		}
	}
</script>

<style>
.head {
	width: 100%;
	height: 130rpx;
	line-height: 130rpx;
	text-align: center;
	font-size: 52rpx;
	font: bold;
	background-color: #FED501;
	color: #FFFFFF;
}
.alongBox {
	position: relative;
	margin: 20rpx;
	-moz-box-shadow:0 0 10rpx #CACACA;
	-webkit-box-shadow:0 0 10rpx #CACACA;
	box-shadow:0 0 10rpx #CACACA;
	height: 240rpx;
	display: flex;
	flex-direction: row;
	align-items: center;
	/* justify-content: space-between; */
}
.alongBox > image {
	width: 200rpx;
	height: 200rpx;
	margin: 20rpx;
}
.alongBox > view {
	display: flex;
	flex-flow: column wrap;
}
.alongBox > view > text:nth-child(1) {
	font-size: 32rpx;
}
.alongBox > view > text:nth-child(2) {
	font-size: 24rpx;
	color: #9c9c9c;
}
.uni-icons {
	position: absolute;
	bottom: 36%;
	right: 20rpx;
}
</style>
